<template>
    <div class="page-wrap">
		<div class="header">
			<div class="left">
				江西省水利学会·江西省水利学会数字化办公平台1.0
			</div>
			<div class="right">
				<!-- <div class="weather">
					<iframe style="width:100%;height:100%" src="http://tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=180&h=36&align=left" frameborder="0"></iframe>
				</div> -->
				<div class="name">
					{{user?user.userName:''}}
				</div>
				<div class="line">
					
				</div>
				<div class="logout" @click="logout" style="cursor:pointer">
					退出
				</div>
			</div>
			
		</div>
		<div class="content-box">
			<div class="side-bar">
				<div class="menu-item" @click="tabMenu('/mapall')">
					<!-- <div class="menu-left">
						
					</div> -->
					<div>
						<div>
							<img src="../assets/iconHome.png" alt="" />
						</div>
						<div>
							门户首页
						</div>
					</div>
				</div>
				<div class="menu-item" :class="{'menu-item-active':nowpath=='/home'}" @click="tabMenu('/home')">
					<div class="menu-left" v-show="nowpath=='/home'">
						
					</div>
					<div>
						<div>
							<img src="../assets/iconBackend.png" alt="" />
						</div>
						<div>
							官网后台
						</div>
					</div>
				</div>
				<div class="menu-item"  @click="tabMenu('/caiwu')" :class="{'menu-item-active':nowpath=='/caiwu'}">
					<div class="menu-left" v-show="nowpath=='/caiwu'">
						
					</div>
					<div>
						<div>
							<img src="../assets/iconFinance.png" alt="" />
						</div>
						<div>
							财务报账
						</div>
					</div>
				</div>
				<div class="menu-item" @click="tabMenu('/sysman')" :class="{'menu-item-active':nowpath=='/sysman'}">
					<div class="menu-left" v-show="nowpath=='/sysman'">
						
					</div>
					<div>
						<div>
							<img style="width:36px;height:36px" src="../assets/sysman.png" alt="" />
						</div>
						<div>
							系统管理
						</div>
					</div>
				</div>
			</div>
		    <div class="content" :class="{'hasbg':nowpath!='/home'}">
				
		        <router-view v-slot="{ Component }">
		        </router-view>
				
		    </div>
		</div>
	</div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
import {useStore} from 'vuex'

import {defineComponent,ref,computed,watch,onMounted   } from 'vue'
import {useRouter} from 'vue-router'
let user=JSON.parse(localStorage.getItem('shuilixiehui-user'))
export default defineComponent({
	components: {
	    vHead,
	    vSidebar,
	    vTags
	},
	
	setup() {
		onMounted(()=>{
		
			bus.on('collapse-content', msg => {
			    collapse.value = msg;
			});
		})
		const $route=useRouter()
		const store = useStore();
		let nowpath=ref('')
		let tagsList=ref([])
		let collapse=ref(false)
		
		watch(
		  () => $route.currentRoute.value,
		  (newValue) => {
		  	nowpath.value=newValue.path
		  },
		  { immediate: true }
		)
		const tabMenu=path=>{
			console.log('888')
			bus.emit('addcontent',{isshowContent:true})
			store.commit('seachparamsChange',{
				currentPage:1,
				pageSize:10,
				"articleAnthor": "",
				time:null,
				"articleSource": "",
				"articleTitle": "",
				"categoryCode": "",
				"endTime": "",
				"startTime": ""
			})
			
			$route.push({
				path
			})
		}
		
		const logout=()=>{
			window.location.href=globalVar.tiaozhuanUrl
		}
		
		return{
			logout,
			user,
			tabMenu,
			nowpath,
			tagsList,
			collapse
		}
	}
	
	
	
})


// export default {

// 	watch: {
// 	    $route: {
// 	      handler: function(newValue, oldValue) {
// 	        this.nowpath=newValue.path
	        
// 	      },
// 	      immediate: true
// 	    }
// 	}
// };
</script>
<style scoped>
	.menu-item{
		position:relative;
		display:flex;
		cursor:pointer;
		width: 100px;
		height: 78px;
		text-align: center;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(1px);
	}
	.menu-left{
		position:absolute;
		left:0;
		top:0;
		bottom:0;
		width: 6px;
		height: 78px;
		background: #5190F5;
		border-radius: 0px 3px 3px 0px;
		backdrop-filter: blur(1px);
	}
	.menu-item-active{
		width: 100px;
		height: 78px;
		background: #EFF3FF;
		backdrop-filter: blur(1px);
	}
	.side-bar{
		background:#fff;
		height:100%;
	}
	.weather{
		position: relative;
		top:22px;
		height:82px;
		width:180px;
		overflow: hidden;
	}
	.header{
		font-family: YouSheBiaoTiHei;
		font-size: 40px;
		padding:0 20px;
		box-sizing: border-box;
		color:#fff;
		align-items: center;
		height:82px;
		display:flex;
		justify-content: space-between;
		border-bottom:2px solid rgba(255,255,255,0.2);
	}
	.header .right{
		font-family: PingFangSC, PingFang SC;
		font-size: 18px;
		align-items: center;
		display:flex;
	}
	/* .header .left{
		font-family: PingFangSC, PingFang SC;
		font-size: 18px;
		align-items: center;
		display:flex;
	} */
	.header .right .line{
		width:1px;
		height:24px;
		background:#fff;
		margin:0 20px;
	}
	
	
	
	.page-wrap{
		position:relative;
		height:100%;
		background:url(../assets/mBg.png) no-repeat 0 0;
		background-size:100% auto;
	}
    .content-box{
		display:flex;
		
		box-sizing: border-box;
		position: absolute;
		top:94px;
		left:40px;
		right:40px;
		bottom:16px;
		overflow: hidden;
		
		background: #EFF3FF;
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
		border-radius: 4px;
		backdrop-filter: blur(1px);
	}
	
	.content{
		margin: 20px;
		box-sizing:border-box;
		flex:1;
		height:calc( 100% - 40px);
		overflow: hidden;
		background:#fff;
	}
	
	.hasbg{
		top:104px;
		background:#fff;
		box-shadow: 0 5px 10px #ddd;
	}
</style>